<template>
  <div class="returnEqp">
    <el-dialog
      :title="$t('return')"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      width="1200px"
    >
      <el-card :style="{paddingBottom: '10px'}" shadow="never">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="formInline"
          label-width="120px"
        >
          <el-row>
            <el-form-item :label="$t('toolingBarcode')" prop="toolingBarcode">
              <el-input
                v-model="formInline.toolingBarcode"
                clearable
                @keydown.enter.native="onEnter"
              />
            </el-form-item>
          </el-row>
          <el-row v-show="formId">
            <el-form-item :label="$t('returnToId')" prop="receiveID">
              <el-input
                v-model="formInline.receiveID"
                disabled
                clearable
              />
            </el-form-item>
            <el-form-item
              :label="$t('returnId')"
              :rules="[
                { required: true, message: `${$t('pleaseInput')}${$t('returnId')}`, trigger: 'blur' },
              ]"
              prop="ToReturn"
            >
              <el-input
                v-model="formInline.ToReturn"
                clearable
              />
            </el-form-item>
          </el-row>
        </el-form>
        <div v-show="tableData.length" :style="{marginTop: '26px', padding: '0 20px 10px 20px'}">
          <dynTable
            ref="dynTable"
            :loading="false"
            :table-data="tableData"
            :table-columns="tableColumns"
          />
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-circle-close" @click="handleClose">{{
          $t("cancel")
        }}</el-button>
        <el-button type="primary" icon="el-icon-document-checked" @click="returnTooling">
          {{ $t('return') }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import toolingApi from '@/api/Tooling/toolingBasicInfo'
import networkTips from '@/mixins/networkTips'
export default {
  name: 'ReturnEqp',
  mixins: [mySetting, networkTips],
  data() {
    return {
      input: '',
      value: '',
      optionsTest: [],
      dialogVisible: false,
      formInline: {
        receiveID: this.$store.state.user.user.userName
      },
      tableData: [],
      flagMode: 0,
      formId: 0, // 控制表单的展示与否
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'toolingBarcode', label: this.$t('toolingBarcode'), width: '140px' },
        { prop: 'toolingType', label: this.$t('toolingType'), width: '100px' },
        { prop: 'toolingModel', label: this.$t('toolingModel'), width: '160px' },
        { prop: 'stock', label: this.$t('stock'), width: '160px', templete: (_scope) => {
          return (
            <el-input vModel={_scope.row.stock} clearable size={'small'} style={{ width: '100%' }}/>
          )
        } },
        { prop: 'hdStatus', label: this.$t('hdStatus'), width: '120px', templete: (_scope) => {
          return (
            <el-select vModel={_scope.row.hdStatus} size={'small'} style={{ width: '100%' }}>
              <el-option value={1} label='Good'/>
              <el-option value={2} label='Fail'/>
            </el-select>
          )
        } },
        { prop: 'usedTime', label: this.$t('returnTimes'), width: '140px' },
        { prop: 'eqpId', label: this.$t('eqpName'), width: '100px' },
        { prop: 'returnRemark', label: this.$t('returnRemark'), width: '160px', templete: (_scope) => {
          return (
            <el-input vModel={_scope.row.returnRemark} clearable size={'small'}
              type='textarea'
              style={{ width: '90%' }}
              maxlength='200'
              show-word-limit/>
          )
        } },
        { prop: '', label: this.$t('action'), width: '60px', templete: (_scope) => {
          return (
            <el-button type='text' size='small'
              onClick={() => this.scopedHandle(_scope.row)}>
              {this.$t('delete')}
            </el-button>
          )
        } }
      ]
    }
  },
  watch: {
    flagMode: {
      handler() {
        if (this.flagMode === 2) {
          this.tableColumns.splice(4, 0, {
            prop: 'returnNums', label: 'OK数量', width: '100px', templete: (_scope) => {
              return (
                <el-input vModel={_scope.row.returnNums} size={'mini'} nativeOnKeyup={(e) => {
                  _scope.row.returnNums = e.target.value.replace(/[^\d.]/g, '')
                }}/>
              )
            }
          },
          {
            prop: 'returnNums', label: 'NG数量', width: '100px', templete: (_scope) => {
              return (
                <el-input vModel={_scope.row.returnNGNums} size={'mini'} nativeOnKeyup={(e) => {
                  _scope.row.returnNGNums = e.target.value.replace(/[^\d.]/g, '')
                }}/>
              )
            }
          })
        }
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 点击归还设备
    returnTooling() {
      const { ToReturn } = this.formInline
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const arr = this.tableData.map(v => {
            return {
              ...v,
              toReturn: ToReturn,
              receiveID: this.$store.state.user.user.userName
            }
          })
          toolingApi.returnTooling(arr).then(res => {
            this.$betterTips(res, this.handleClose, this.handleUpdate)
          })
        } else {
          return false
        }
      })
    },
    // 点击enter键
    onEnter() {
      toolingApi.getToolingInfo({ toolingBarcde: this.formInline.toolingBarcode, actionType: 2 }).then(res => {
        this.formInline.toLend = this.$store.state.user.user.userName
        if (res.code === 1) {
          this.resultData = res.data
          //  数组为空或者mode一致并且不重复
          if (this.tableData.length === 0 || this.tableData.some(ele => ele.mode === res.data.mode)) {
            if (!this.tableData.some(ele => ele.id === res.data.id)) {
              this.flagMode = res.data.mode
              this.tableData.push(res.data)
              this.formId = res.data.id
              this.$betterTips(res)
              this.formInline.toolingBarcode = ''
            } else {
              this.$message.error('不能重复添加')
            }
          } else {
            this.$message.error(this.$t('differentType'))
          }
        } else {
          this.$betterTips(res)
        }
      })
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    // 关闭弹窗
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    // 打开弹窗
    openDialog() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
    },
    handleUpdate() {
      this.$emit('initList')
    },
    scopedHandle(val) {
      this.tableData = this.tableData.filter(ele => ele.id !== val.id)
    }
  }
}
</script>
<style lang='scss' scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
